<template>
  <div id="map-container" class="map-container">
    <l-map
      ref="map"
      class="map-content"
      style="height: 100%"
      :zoom="$config.mapBaseConfig.zoom"
      :center="$config.mapBaseConfig.center"
      :min-zoom="$config.mapBaseConfig.minZoom"
      :max-zoom="$config.mapBaseConfig.maxZoom"
      :crs="$config.mapBaseConfig.crs"
      :options="mapOptions"
    >
      <div v-show="isShowControls != false">
        <l-tile-layer v-if="mapMode == 'sl'" :url="$config.mapLayers.cqVec.tileUrl" />
        <l-layer-group v-if="mapMode == 'yx'">
          <l-tile-layer :url="$config.mapLayers.cqImg.tileUrl" />
          <l-tile-layer :url="$config.mapLayers.cqMark.tileUrl" />
        </l-layer-group>
      </div>

      <l-tile-layer
        v-for="(value, key, index) in treeCheckedObj"
        :key="key"
        ref="treeCheckedLayer"
        :url="value.tileUrl"
      />

      <l-feature-group ref="features">
        <l-popup class="tdMap-popup-box" :options="{ height: 400, width: 450 }">
          <div class="piankuaiBox">
            <div class="piankuaihao">
              {{
              baseInfoData != null && baseInfoData != ""
              ? baseInfoData.pkh
              : "-"
              }}
            </div>
            <div class="piankuaiBox_select">
              <div
                @click="changeTab(1)"
                :class="{ piankuaiBox_select_item: true, active: tabFlag == 1 }"
              >基本信息</div>
              <div
                @click="changeTab(2)"
                :class="{ piankuaiBox_select_item: true, active: tabFlag == 2 }"
              >综合监管</div>
            </div>
            <div class="jibenxinxi" v-show="tabFlag == 1">
              <slot name="popupBaseInfo"></slot>
            </div>
            <div class="jibenxinxi" v-show="tabFlag == 2">
              <slot name="popupJgInfo"></slot>
            </div>
          </div>
        </l-popup>
      </l-feature-group>

      <v-marker-cluster ref="clusterRef" :options="clusterOptions" @clusterclick="click()">
        <template v-for="geoJson in locations">
          <l-geo-json
            v-if="geoJson.feature"
            ref="geoJson"
            :geojson="geoJson.feature"
            :options="geoJsonOptions"
            @click="handleClickPolygon($event, geoJson)"
          />
        </template>
      </v-marker-cluster>

      <l-feature-group ref="features">
        <l-popup class="tdMap-popup-box" :options="{ height: 400, width: 400 }">
          <div class="item-detail">
            <div v-loading="pkDetailLoader">
              <div class="item-title">{{ pkDetail.landName }}</div>
              <div class="item-info">
                <p class="item-name">项目地址：</p>
                <p class="item-desc">{{ pkDetail.projectAddress }}</p>
              </div>
              <div class="item-info">
                <p class="item-name">项目编号：</p>
                <p class="item-desc">{{ pkDetail.projectNumber }}</p>
              </div>
              <div class="item-info">
                <p class="item-name">项目时间：</p>
                <p class="item-desc">{{ pkDetail.projectTime }}</p>
              </div>
              <div class="item-info">
                <p class="item-name">项目类型：</p>
                <p class="item-desc">{{ pkDetail.projectType }}</p>
              </div>
              <div class="item-info">
                <p class="item-name">项目面积：</p>
                <p class="item-desc">{{ pkDetail.landArea | M2}}</p>
              </div>
              <div class="item-info">
                <p class="item-name">权利人：</p>
                <p class="item-desc">{{ pkDetail.qlr }}</p>
              </div>
              <div class="item-info">
                <p class="item-name">区/县：</p>
                <p class="item-desc">{{ pkDetail.areaName }}</p>
              </div>
              <div class="item-info">
                <p class="item-name">乡镇：</p>
                <p class="item-desc">{{ pkDetail.townName }}</p>
              </div>
              <div class="item-info">
                <p class="item-name">村社：</p>
                <p class="item-desc">{{ pkDetail.villageName }}</p>
              </div>
              <div class="view-detail" @click="viewProjectInfo">查看项目信息</div>
            </div>
          </div>
        </l-popup>
      </l-feature-group>
    </l-map>

    <!-- 地图工具栏 s -->
    <div v-show="isShowControls != false" class="map-tools">
      <!-- <div
        @click="handleToolsSwitch('search')"
        id="lineMeasure"
        :class="{ 'map-tools-item line': true, active: toolsValue.search }"
        style="position:relative"
        title="搜索"
      >
        <i class="chy-icon-sousuo"></i>
      </div>-->
      <div
        title="图层"
        :class="{ 'map-tools-item line': true, active: toolsValue.layer }"
        @click="handleToolsSwitch('layer')"
      >
        <svg-icon
          class="svg-icon"
          :icon-class="!toolsValue.layer ? 'chy-icon-nav' : 'chy-icon-nav-active'"
        />
        <!-- <i class="chy-icon-nav"></i> -->
      </div>

      <div
        id="lineMeasure"
        title="测距"
        :class="{ 'map-tools-item line': true, active: toolsValue.ruler }"
        @click="handleToolsSwitch('ruler')"
      >
        <svg-icon
          class="svg-icon"
          :icon-class="!toolsValue.ruler ? 'chy-icon-celiang' : 'chy-icon-celiang-active'"
        />
        <!-- <i class="chy-icon-celiang"></i> -->
      </div>

      <div
        id="areaMeasure"
        title="面积测量"
        :class="{ 'map-tools-item line': true, active: toolsValue.area }"
        @click="handleToolsSwitch('area')"
      >
        <svg-icon
          class="svg-icon"
          :icon-class="!toolsValue.area ? 'chy-icon-mianji' : 'chy-icon-mianji-active'"
        />
        <!-- <i class="chy-icon-mianji"></i> -->
      </div>

      <div
        title="卷帘对比"
        :class="{ 'map-tools-item line': true, active: toolsValue.cut }"
        @click="openSideBySidePopup"
      >
        <svg-icon
          class="svg-icon"
          :icon-class="!toolsValue.cut ? 'chy-icon-juanlian' : 'chy-icon-juanlian-active'"
        />
        <!-- <i class="chy-icon-juanlian"></i> -->
      </div>

      <div id="browserPrint" class="map-tools-item line" title="打印">
        <svg-icon class="svg-icon" icon-class="chy-icon-dayin" />
        <!-- <i class="chy-icon-dayin"></i> -->
      </div>

      <div
        :title="isFullScreen == true ? '退出全屏' : '全屏'"
        class="map-tools-item line"
        @click.stop="handleFullScreen"
      >
        <!-- <i :class="isFullScreen == true ? 'chy-icon-tuichuquanping' : 'chy-icon-quanping'"></i> -->
        <svg-icon class="svg-icon" icon-class="chy-icon-quanping" />
        <!-- <i class="chy-icon-quanping"></i> -->
      </div>

      <div class="map-tools-item line" title="清除测距、面积测量" @click.stop="handleClear">
        <svg-icon class="svg-icon" icon-class="chy-icon-qingchu" />
        <!-- <i class="chy-icon-qingchu"></i> -->
      </div>
    </div>
    <!-- 地图工具栏 e -->

    <div class="choose-item">
      <div @click.stop="changeMapMode('yx')" class="map-mode-item yx">
        <div class="text">影像</div>
      </div>
      <div @click.stop="changeMapMode('sl')" class="map-mode-item sl">
        <div class="text">地图</div>
      </div>
      <div @click.stop="changeMapMode('dx')" class="map-mode-item dx">
        <div class="text">地形</div>
      </div>
    </div>

    <!-- 地图右侧图层s -->
    <div :class="isFullScreen == false ? 'right-all active' : 'right-all'">
      <div class="map-right">
        <div class="show-left-chart" v-show="!isShowCharts" @click="showCharts" title="查看统计图">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="map-right-nav">
          <ul>
            <li :class="{ on: !currentStatus }" @click="changeStatus(1)">项目统计</li>
            <li :class="{ on: currentStatus }" @click="changeStatus(0)">详细情况</li>
          </ul>
        </div>
        <div v-show="!currentStatus">
          <div
            v-loading="
              echarts3Loader == false
                ? echarts5Loader == true
                  ? true
                  : false
                : true
            "
            class="map-right-panle"
          >
            <div class="item">
              <p class="title">复垦申请量（个）</p>
              <p class="number">{{ echarts3Data.fksql }}</p>
            </div>
            <div class="item">
              <p class="title">复垦项目个数（个）</p>
              <p class="number">{{ echarts3Data.fkxmgs }}</p>
            </div>
            <div class="item">
              <p class="title">综合整治项目数（个）</p>
              <p class="number">{{ echarts5Data.number }}</p>
            </div>
            <div class="item">
              <p class="title">地票交易量（个）</p>
              <p class="number">{{ echarts3Data.dpjyl }}</p>
            </div>
            <div class="item">
              <p class="title">复垦总面积（公顷）</p>
              <p class="number">{{ echarts3Data.fkzmj }}</p>
            </div>
            <div class="item">
              <p class="title">综合整治面积（公顷）</p>
              <p class="number">{{ echarts5Data.totalArea }}</p>
            </div>
          </div>
          <div class="wrap">
            <el-tabs value="first">
              <el-tab-pane label="年度指标完成情况统计" name="first">
                <div class="pie">
                  <div class="pie-left">
                    <div
                      id="pie_echarts_l"
                      class="layui-card-body"
                      style="width: 85px; height: 85px;"
                      v-loading="echarts1Loader"
                    ></div>
                    <div class="left-cover">
                      <span class="rate">{{ echarts1Data.completeRate }}%</span>
                      <span class="tip">完成率</span>
                    </div>
                    <div class="pie-title">农村建设用地复垦</div>
                  </div>
                  <div class="pie-right">
                    <template>
                      <div
                        id="pie_echarts_r"
                        class="layui-card-body"
                        style="width: 85px; height: 85px;"
                        v-loading="echarts2Loader"
                      ></div>
                      <div class="right-cover">
                        <span class="rate">{{ echarts2Data.completedRatio }}%</span>
                        <span class="tip">完成率</span>
                      </div>
                      <div class="pie-title">国土综合整治</div>
                    </template>
                  </div>
                  <div class="pie-line"></div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="各阶段面积统计分析" name="second">
                <div class="pie">
                  <div class="pie-left">
                    <div
                      id="pie_echarts_two"
                      class="layui-card-body"
                      style="width: 110px; height: 140px;"
                      v-loading="echarts3Loader"
                    ></div>
                    <div class="pie-title">农村建设用地复垦</div>
                  </div>
                  <div class="pie-right">
                    <div
                      id="pie_echarts_two2"
                      class="layui-card-body"
                      style="width: 110px; height: 140px;"
                      v-loading="echarts4Loader"
                    ></div>
                    <div class="pie-title">国土综合整治</div>
                  </div>
                  <div class="pie-line" style="top:70px"></div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <!-- <div class="wrap" style="padding-top: 14px;">
            <p class="wrap-title">各阶段面积统计分析</p>
            
          </div>-->
          <div class="wrap" style="padding-top: 12px;">
            <p class="wrap-title">项目红线分布情况</p>
            <div style="margin-top: 20px">
              <div
                @click="tabGetPoint('N_C_J_S_Y_D_F_K')"
                :class="{ btn: true, active: projectType == 'N_C_J_S_Y_D_F_K' }"
              >农村土地建设用地复垦</div>
              <div
                @click="tabGetPoint('G_T_Z_H_Z_Z')"
                :class="{ btn: true, active: projectType == 'G_T_Z_H_Z_Z' }"
              >国土综合整治</div>
            </div>
            <div class="status">
              <div>
                <span class="green"></span>前期测绘阶段
              </div>
              <div>
                <span class="blue"></span>入库备案阶段
              </div>
              <div>
                <span class="pink"></span>竣工测绘阶段
              </div>
            </div>
          </div>
        </div>
        <div v-show="currentStatus" style="line-height: 40px;">
          <rightPanel ref="rightPanel" v-on:showDetail="showResultDetailEvent"></rightPanel>
        </div>
      </div>
    </div>
    <!-- 地图右侧图层e -->

    <!-- 列表echart s -->
    <transition name="el-fade-in-linear">
      <cityEcharts
        :class="isFullScreen == false ? 'cityChart active' : 'cityChart'"
        v-show="isShowCharts"
        v-on:closeCharts="showCharts"
      ></cityEcharts>
    </transition>
    <!-- 列表echart e -->

    <!-- 一级列表s -->
    <transition name="el-fade-in-linear">
      <div :class="isFullScreen == false ? 'detail active' : 'detail'" v-show="showResultDetail">
        <div v-loading="projectDetailLoader">
          <div class="close" @click="showResultDetailEvent('close')">
            <i class="el-icon-close"></i>
          </div>
          <div class="title">
            {{
            projectDetailType == "国土综合整治"
            ? projectDetail.name
            : projectDetail.projectName
            }}
          </div>
          <div class="btn">
            <div :class="{ left: true, on: detailShow }" @click="detailChange(0)">项目信息</div>
            <div
              v-if="projectDetailType == '农村建设用地复垦'"
              :class="{ right: true, on: !detailShow }"
              @click="detailChange(1)"
            >片块信息</div>
          </div>
          <div v-show="detailShow" class="li-list">
            <ul v-if="projectDetailType == '国土综合整治'">
              <li>
                <div class="left">项目编号：</div>
                <div>{{ projectDetail.number }}</div>
              </li>
              <li>
                <div class="left">项目类型：</div>
                <div>{{ projectDetail.types }}</div>
              </li>
              <li>
                <div class="left">图幅号：</div>
                <div>{{ projectDetail.frameNumber }}</div>
              </li>
              <li>
                <div class="left">项目地址：</div>
                <div>{{ projectDetail.address }}</div>
              </li>
              <li>
                <div class="left">项目工期：</div>
                <div>{{ projectDetail.duration + "个月" }}</div>
              </li>
              <li>
                <div class="left">项目年度：</div>
                <div>{{ projectDetail.year + "年" }}</div>
              </li>
              <li>
                <div class="left">投资回收期：</div>
                <div>{{ projectDetail.recover }}</div>
              </li>
              <li>
                <div class="left">项目级别：</div>
                <div>{{ projectDetail.level == 0 ? "市级" : "区县级" }}</div>
              </li>
              <li>
                <div class="left">是否属于高标准基本农田项目：</div>
                <div>{{ projectDetail.isStandard == 0 ? "是" : "否" }}</div>
              </li>
            </ul>
            <ul v-if="projectDetailType == '农村建设用地复垦'">
              <li>
                <div class="left">1:10000图幅号：</div>
                <div>{{ projectDetail.tfh }}</div>
              </li>
              <li>
                <div class="left">1:10000图斑号：</div>
                <div>{{ projectDetail.tbh }}</div>
              </li>
              <li>
                <div class="left">红线面积：</div>
                <div>{{ projectDetail.hxmj }}</div>
              </li>
              <li>
                <div class="left">复垦点个数：</div>
                <div>{{ projectDetail.fkdgs }}</div>
              </li>
              <li>
                <div class="left">复垦点规模：</div>
                <div>{{ projectDetail.fkdgm }}</div>
              </li>
              <li>
                <div class="left">宅基地面积：</div>
                <div>{{ projectDetail.zjdmj }}</div>
              </li>
              <li>
                <div class="left">宅基地附属用地面积：</div>
                <div>{{ projectDetail.zjdfsydmj }}</div>
              </li>
              <li>
                <div class="left">其他：</div>
                <div>{{ projectDetail.qt }}</div>
              </li>
              <li>
                <div class="left">减少建设用地面积：</div>
                <div>{{ projectDetail.jsjsydmj }}</div>
              </li>
              <li>
                <div class="left">实施规模：</div>
                <div>{{ projectDetail.jsjsydmj }}</div>
              </li>
              <li>
                <div class="left">建设规模：</div>
                <div>{{ projectDetail.ssgm }}</div>
              </li>
              <li>
                <div class="left">变更范围面积：</div>
                <div>{{ projectDetail.bgfwmj }}</div>
              </li>
            </ul>
          </div>
          <div v-show="!detailShow" class="piankuai">
            <ul>
              <li
                v-for="(item, index) in projectDetailPk"
                :key="index"
                @click="closeItemDetail('open', item)"
              >
                <div class="no">{{ index + 1 }}</div>
                <div class="right">
                  <p class="name">{{ item.landName }}</p>
                  <p class="code">片块编号：{{ item.landNumber }}</p>
                  <p class="user">权利人：{{ item.qlr }}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </transition>
    <!-- 一级列表e -->

    <!--  一级列表详情s -->
    <transition name="el-fade-in-linear">
      <div class="item-detail" v-show="itemDetail">
        <div v-loading="pkDetailLoader">
          <div class="close" @click="closeItemDetail('close')">
            <i class="el-icon-close"></i>
          </div>
          <div class="item-title">{{ pkDetail.landName }}</div>
          <div class="item-info">
            <p class="item-name">项目地址</p>
            <p class="item-desc">{{ pkDetail.projectAddress }}</p>
          </div>
          <div class="item-info">
            <p class="item-name">项目编号</p>
            <p class="item-desc">{{ pkDetail.projectNumber }}</p>
          </div>
          <div class="item-info">
            <p class="item-name">项目时间</p>
            <p class="item-desc">{{ pkDetail.projectTime }}</p>
          </div>
          <div class="item-info">
            <p class="item-name">项目类型</p>
            <p class="item-desc">{{ pkDetail.projectType }}</p>
          </div>
          <div class="item-info">
            <p class="item-name">权利人</p>
            <p class="item-desc">{{ pkDetail.qlr }}</p>
          </div>
          <div class="item-info">
            <p class="item-name">区/县</p>
            <p class="item-desc">{{ pkDetail.areaName }}</p>
          </div>
          <div class="item-info">
            <p class="item-name">乡镇</p>
            <p class="item-desc">{{ pkDetail.townName }}</p>
          </div>
          <div class="item-info">
            <p class="item-name">村社</p>
            <p class="item-desc">{{ pkDetail.villageName }}</p>
          </div>
        </div>
      </div>
    </transition>
    <!-- 一级列表详情e -->

    <!-- 地图图层 s -->
    <transition name="el-zoom-in-top">
      <div class="map-layer" v-show="toolsValue.layer">
        <div class="type-change" @click="typeChange($event)">
          <div :class="{ 'left-type': true, on: !currentType }">图件</div>
          <div :class="{ 'right-type': true, on: currentType }">透明度</div>
        </div>
        <div class="touming" v-if="currentType">
          <template v-if="toumingList.length <= 0">
            <div class="no-data">暂未添加图层</div>
          </template>
          <template v-else>
            <div class="touming-item" v-for="(item, index) in toumingList" :key="index">
              <div class="touming-title">
                {{ item.parentLabel + "-" + item.label }}
                <span
                  @click="handleTreeCheck(item, index)"
                  class="close"
                >
                  <i class="el-icon-close"></i>
                </span>
              </div>
              <div>
                <el-slider
                  @change="setOpacity($event, index)"
                  :max="1"
                  :step="0.01"
                  v-model="item.value"
                ></el-slider>
              </div>
            </div>
          </template>
        </div>
        <el-collapse v-model="collapseValue" v-if="!currentType">
          <el-collapse-item v-for="(item, index) in $config.treeData" :key="index" name="1">
            <template slot="title">
              <div class="map-layer-title">{{ item.label }}</div>
            </template>
            <div class="map-layer-content">
              <div
                :class="{
                  'map-layer-content-item': true,
                  active: item2.isChecked
                }"
                @click="handleTreeCheck(item2)"
                v-for="(item2, index2) in item.children"
                :key="index2"
              >{{ item2.label }}</div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </transition>
    <!-- 地图图层 e -->

    <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" />
    </el-dialog>

    <el-dialog
      class="side-by-side-popup"
      title="选择卷帘对比的图层"
      :close-on-click-modal="false"
      :visible.sync="sideBySidePopup"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card header="左侧图层">
            <el-tree
              @node-click="handleSideBySideClick($event, 'left')"
              ref="leftTree"
              :data="$config.treeData"
              :expand-on-click-node="false"
              :highlight-current="true"
              default-expand-all
              :props="defaultProps"
            ></el-tree>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card header="右侧图层">
            <el-tree
              @node-click="handleSideBySideClick($event, 'right')"
              ref="rightTree"
              :data="$config.treeData"
              :expand-on-click-node="false"
              :highlight-current="true"
              default-expand-all
              :props="defaultProps"
            ></el-tree>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-button @click="handleSideBySide" class="confirm-btn">确定选择</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  LMap,
  LTileLayer,
  LPopup,
  LLayerGroup,
  LGeoJson,
  LFeatureGroup,
  LControl,
  LMarker
} from 'vue2-leaflet'
import 'leaflet/dist/leaflet.css'
import '@/icons/iconfont.css'
import 'leaflet.browser.print/dist/leaflet.browser.print'

import 'leaflet-fullscreen/dist/leaflet.fullscreen.css'
import 'leaflet-fullscreen/dist/Leaflet.fullscreen.min.js'

// import markerIcon from "leaflet/dist/images/marker-icon.png";
// import iconShadow from "leaflet/dist/images/marker-shadow.png";
import iconUrl from 'leaflet/dist/images/marker-icon.png'
import pointUrl from '@/assets/map/marker-icon.png'
import shadowUrl from 'leaflet/dist/images/marker-shadow.png'

let DefaultIcon = L.icon({
  iconUrl: pointUrl,
  iconSize: [30, 30]
})
L.Marker.prototype.options.icon = DefaultIcon

import Vue2LeafletMarkercluster from 'vue2-leaflet-markercluster'

import '@/lib/leaflet/control.css'
import '@/lib/leaflet/control.js'

var echarts = require('echarts')

import { QScreenSwitcher, requestFullScreen, exitFull } from '@/utils/common.js'
var esri = require('esri-leaflet')
import {
  echarts1,
  echarts2,
  echarts4,
  totalAndArea,
  totalAndArea2,
  getPictureList,
  projectReadLineStatistics,
  getThreeProjectDetail,
  getTwoProjectDetail,
  getTwoProjectPkDetail,
  getPkDetailById
} from '@/api/bigMap'

import config from '@/config'

// 右侧公用模板
import rightPanel from './rightPanel'
// echarts模板引入
import cityEcharts from './cityEcharts'

import 'proj4leaflet/lib/proj4-compressed.js'
import 'proj4leaflet/src/proj4leaflet.js'

export default {
  name: 'bigMap',
  components: {
    LMap,
    LTileLayer,
    LPopup,
    LLayerGroup,
    LGeoJson,
    LFeatureGroup,
    LControl,
    LMarker,
    rightPanel,
    cityEcharts,
    'v-marker-cluster': Vue2LeafletMarkercluster
  },
  props: [
    'pkList',
    'isShowControls',
    'isShowScyjBtn',
    'isShowXztBtn',
    'xianZhuangPath',
    'cuowuList'
  ],
  data() {
    let geoJsonOptions = {
      // onEachFeature: function(feature, layer) {
      //   layer.getLatLng = function() {
      //     return this.getBounds().getCenter();
      //   };
      //   layer.setLatLng = function() {};
      //   layer._latlng = layer.getLatLng();
      // }
    }
    return {
      locations: [],
      clusterOptions: {},
      geoJsonOptions,

      isShowCharts: false, // 展示charts图
      itemDetail: false, // 列表详情的详情弹窗
      showResultDetail: false, // 搜索列表点击详情弹窗
      detailShow: true, // 详情tab切换
      input2: '', // 详情搜索框
      currentType: false, // 图件和透明度表格切换显示
      // 显示隐藏问题框
      showWenTiBox: false,
      // 审查现状图全屏加载
      fullscreenLoading: false,
      // 审查现状图
      xianZhuangShenCha: false,
      // 假装加载地图
      loadIfram: 1,
      // 现状图显示关闭
      mapIframe: false,
      // 显示四个输入框
      showThreeFlag: false,
      // 是否为缺失遗漏点
      isMissingReclaimPoint: 'NO',
      // 审定规模与送审规模是否一致
      isIdenticalScale: 'NO',
      // 切换选项卡
      tabFlag: 1,
      // 地图图层模式
      mapMode: 'yx', // yx影像；sl矢量
      // 地图弹层
      mapPopup: null,
      mapOptions: {
        zoomControl: true
      },
      value: '', //下拉框默认值
      // geoJson style
      polygonStyleMap: {
        defaultStyle: {
          color: '#ff0000',
          weight: 1,
          fillOpacity: 0.2
        },
        activeStyle: {
          color: '#ff6600',
          weight: 1,
          fillOpacity: 0.2
        }
      },

      // 地图导航配置
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 透明模块列表
      toumingList: [],
      // 页面参数
      navActive: true,
      polygonArr: [],
      polygonMap: {},
      geoJsonArr: [],
      geoJsonOptions: {},
      popupActiveName: 'baseInfo',
      baseInfoData: null, // 基本信息数据
      jgInfoData: {
        // 监管信息数据
        xctk: null, // 现场踏勘
        xctkList: [],
        qqch: null, // 前期测绘
        qqchList: [],
        cgcs: null // 成果初审
      },
      jgInfoTabActiveName: 'xctk',
      jgInfoLoading: false,
      dialogVisible: false,
      dialogImageUrl: null,
      treeCheckedObj: {},
      control: {
        lineMeasure: null,
        areaMeasure: null,
        browserPrint: null,
        siderCompare: null
      },
      fullScreen: new QScreenSwitcher(),
      isFullScreen: false,

      isFalse: true,
      sideBySidePopup: false, // 卷帘对比选择弹窗
      sideBySideStatus: 'close',
      sideBySideUrl: {
        left: null,
        right: null
      },
      markerLatLng: null,
      searchValue: '', // 搜索值
      collapseValue: '1', // 折叠面板
      toolsValue: {
        // 地图工具开关状态
        layer: false,
        ruler: false,
        area: false,
        cut: false,
        search: false
      },
      currentPolygon: null,
      currentPkData: null, // 当前选中片块
      currentStatus: false, // 右侧面板选中tab
      echarts1Data: '', // 第1个echarts图的数据
      echarts2Data: '', // 第2个echarts图的数据
      echarts3Data: '', // 第3个echarts图的数据
      echarts4Data: '', // 第4个echarts图的数据
      echarts5Data: '',
      echarts1Loader: false, // 转圈圈
      echarts2Loader: false,
      echarts3Loader: false,
      echarts4Loader: false,
      echarts5Loader: false,
      projectType: 'N_C_J_S_Y_D_F_K',
      projectDetailLoader: false,
      projectDetail: '',
      projectDetailPk: [],
      projectDetailPkLoader: false,
      projectDetailType: '',
      projectItem: '',
      pkDetailLoader: false,
      pkDetail: ''
    }
  },
  watch: {},
  methods: {
    click: e => console.log('clusterclick', e),
    ready: e => console.log('ready', e),

    showCharts() {
      //展示Echarts图
      this.isShowCharts = this.isShowCharts ? false : true
    },
    closeItemDetail(type, item) {
      //列表详情的详情弹窗
      if (type == 'open') {
        //打开
        // this.itemDetail = true;
        this.pkDetailLoader = true
        getPkDetailById({
          flowId: this.projectItem.stage,
          landId: item.landId
        })
          .then(res => {
            this.pkDetailLoader = false
            this.pkDetail = res.data
            this.handleClickPolygon2(this.pkDetail)
          })
          .catch(err => {
            this.pkDetailLoader = false
          })
      }
    },
    showResultDetailEvent(obj) {
      if (obj == 'close') {
        //关闭
        this.showResultDetail = false
      } else {
        //打开
        this.showResultDetail = true
        this.projectItem = obj
        this.projectDetailType = obj.projectType
        if (obj.projectType == '国土综合整治') {
          this.getThreeProjectDetail(obj.projectId)
          this.tabGetPoint('G_T_Z_H_Z_Z')
        } else if (obj.projectType == '农村建设用地复垦') {
          this.getTwoProjectDetail(obj)
          this.tabGetPoint('N_C_J_S_Y_D_F_K')
        }
      }
    },
    getTwoProjectDetail(obj) {
      this.projectDetailLoader = true
      getTwoProjectDetail({
        projectId: obj.projectId,
        projectType: 'N_C_J_S_Y_D_F_K',
        stage: obj.stage
      })
        .then(res => {
          this.projectDetailLoader = false
          this.projectDetail = res.data
        })
        .catch(err => {
          this.projectDetailLoader = false
        })

      this.projectDetailPkLoader = true
      getTwoProjectPkDetail({
        projectId: obj.projectId
      })
        .then(res => {
          this.projectDetailPkLoader = false
          this.projectDetailPk = res.data
        })
        .catch(err => {
          this.projectDetailPkLoader = false
        })
    },
    getThreeProjectDetail(id) {
      this.projectDetailLoader = true
      getThreeProjectDetail({
        projectId: id
      })
        .then(res => {
          this.projectDetailLoader = false
          this.projectDetail = res.data
        })
        .catch(err => {
          this.projectDetailLoader = false
        })
    },
    detailChange(type) {
      //详情tab切换
      this.detailShow = type == 0 ? true : false
    },
    changeStatus(type) {
      // 右侧面板tab切换
      this.currentStatus = type == 0 ? true : false
    },
    typeChange(e) {
      //图件和透明度切换
      if (e.target.className.indexOf('left-type') > -1) {
        this.currentType = false
      } else {
        this.currentType = true
      }
    },
    //上部分Echarts
    renderChart1() {
      let chart1 = echarts.init(document.getElementById('pie_echarts_l'))
      // 指定图表的配置项和数据
      let option = {
        color: ['#49A0F4', '#B7D8F8'],
        tooltip: {
          show: false
        },
        label: {
          normal: {
            position: 'inner',
            show: false
          }
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 0
        },
        series: [
          {
            type: 'pie',
            radius: '100%',
            data: [
              { value: this.echarts1Data.completeRate },
              { value: 100 - this.echarts1Data.completeRate }
            ],
            itemStyle: {
              normal: {
                label: {
                  show: false //隐藏标示文字
                },
                labelLine: {
                  show: false //隐藏标示线
                }
              }
            },
            hoverAnimation: false
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      chart1.setOption(option)
    },
    renderChart2() {
      let chart2 = echarts.init(document.getElementById('pie_echarts_r'))
      // 指定图表的配置项和数据
      let option = {
        color: ['#49A0F4', '#B7D8F8'],
        tooltip: {
          show: false
        },
        label: {
          normal: {
            position: 'inner',
            show: false
          }
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 0
        },
        series: [
          {
            type: 'pie',
            radius: '100%',
            data: [
              { value: this.echarts2Data.completedRatio },
              { value: 100 - this.echarts2Data.completedRatio }
            ],
            itemStyle: {
              normal: {
                label: {
                  show: false //隐藏标示文字
                },
                labelLine: {
                  show: false //隐藏标示线
                }
              }
            },
            hoverAnimation: false
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      chart2.setOption(option)
    },
    //下部分Echarts
    renderChart3() {
      var chart3 = echarts.init(document.getElementById('pie_echarts_two'))
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          itemHeight: 10,
          top: '-5',
          left: 'center',
          textStyle: {
            //图例文字的样式
            color: 'rgba(128,128,128,1);',
            fontSize: 11
          },
          data: [
            {
              name: '前期测绘面积',
              icon: 'circle'
            },
            {
              name: '入库备案面积',
              icon: 'circle'
            },
            {
              name: '竣工测绘面积',
              icon: 'circle'
            }
          ]
        },
        color: ['#50A3F8', '#FCC64D', '#50D1F8'],
        series: [
          {
            name: '单位：公顷',
            type: 'pie',
            center: ['50%', '70%'],
            radius: '70%',
            data: [
              { value: this.echarts3Data.qqchmj, name: '前期测绘面积' },
              { value: this.echarts3Data.rkbamj, name: '入库备案面积' },
              { value: this.echarts3Data.jgchmj, name: '竣工测绘面积' }
            ].sort(function(a, b) {
              return a.value - b.value
            }),
            roseType: 'radius',
            itemStyle: {
              normal: {
                label: {
                  show: false //隐藏标示文字
                },
                labelLine: {
                  show: false //隐藏标示线
                }
              }
            },
            hoverAnimation: false,
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function(idx) {
              return Math.random() * 200
            }
          }
        ]
      }
      chart3.setOption(option)
    },
    renderChart4() {
      var chart4 = echarts.init(document.getElementById('pie_echarts_two2'))
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          itemHeight: 10,
          top: '-5',
          left: 'center',
          textStyle: {
            //图例文字的样式
            color: 'rgba(128,128,128,1);',
            fontSize: 11
          },
          data: [
            {
              name: '前期测绘面积',
              icon: 'circle'
            },
            {
              name: '入库备案面积',
              icon: 'circle'
            },
            {
              name: '竣工测绘面积',
              icon: 'circle'
            }
          ]
        },
        color: ['#50A3F8', '#FCC64D', '#50D1F8'],
        series: [
          {
            name: '单位：公顷',
            type: 'pie',
            center: ['50%', '70%'],
            radius: '70%',
            data: [
              {
                value: this.echarts4Data.prophaseSurveyArea,
                name: '前期测绘面积'
              },
              {
                value: this.echarts4Data.storeAdministrationArea,
                name: '入库备案面积'
              },
              {
                value: this.echarts4Data.completedSurveyArea,
                name: '竣工测绘面积'
              }
            ].sort(function(a, b) {
              return a.value - b.value
            }),
            roseType: 'radius',
            itemStyle: {
              normal: {
                label: {
                  show: false //隐藏标示文字
                },
                labelLine: {
                  show: false //隐藏标示线
                }
              }
            },
            hoverAnimation: false,
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function(idx) {
              return Math.random() * 200
            }
          }
        ]
      }
      chart4.setOption(option)
    },
    //切换选项卡
    changeTab(num) {
      this.tabFlag = num
    },
    handleFullScreen() {
      // 全屏
      if (this.isFullScreen) {
        this.fullScreen.exitFullScreen(document.getElementById('map-container'))
      } else {
        this.fullScreen.enterFullScreen(
          // document.documentElement
          document.getElementById('map-container')
        )
      }
      this.isFullScreen = !this.isFullScreen
    },
    handleClear() {
      // 清除测距、面积测距
      let _lineMeasureLayer = this.control['lineMeasure']['_layerPaint']
      let _areaMeasureLayer = this.control['areaMeasure']['_layer']
      if (_areaMeasureLayer != null) {
        for (var k in _areaMeasureLayer['_layers']) {
          _areaMeasureLayer.removeLayer(_areaMeasureLayer['_layers'][k])
        }
      }
      if (_lineMeasureLayer != null) {
        _lineMeasureLayer.clearLayers()
      }

      this.toolsValue['ruler'] = false
      this.toolsValue['area'] = false
    },
    openSideBySidePopup() {
      if (this.sideBySideStatus == 'close') {
        this.sideBySidePopup = true
      } else {
        this.handleToolsSwitch('cut')
        this.$refs.map.mapObject.removeLayer(this.sideBySideUrl.left)
        this.$refs.map.mapObject.removeLayer(this.sideBySideUrl.right)
        this.control.siderCompare.remove()
        this.sideBySideStatus = 'close'
      }
    },
    handleSideBySideClick(e, name) {
      if (e.url) {
        this.sideBySideUrl[name] = e.url
      } else {
        this.sideBySideUrl[name] = null
        this.$message({
          message: `${name == 'left' ? '左侧' : '右侧'}所选图层暂无数据`,
          type: 'warning'
        })
      }
    },
    handleSideBySide() {
      // 卷帘对比
      if (this.sideBySideUrl.left == null) {
        this.$message({
          message: `左侧所选图层暂无数据`,
          type: 'warning'
        })
        return
      }
      if (this.sideBySideUrl.right == null) {
        this.$message({
          message: `右侧所选图层暂无数据`,
          type: 'warning'
        })
        return
      }
      let left = this.sideBySideUrl.left
      let right = this.sideBySideUrl.right
      this.$refs.map.mapObject.addLayer(left)
      this.$refs.map.mapObject.addLayer(right)
      this.control.siderCompare = L.control
        .sideBySide(left, right)
        .addTo(this.$refs.map.mapObject)
      this.sideBySidePopup = false
      this.sideBySideStatus = 'open'
      this.handleToolsSwitch('cut')
    },
    initMap() {
      this.$nextTick(() => {
        this.fitBounds()

        // if (this.isShowControls == false) {
        //   let arr = this.pkList[0].point.split(" ");
        //   this.markerLatLng = [arr[1], arr[0]];
        //   L.marker(this.markerLatLng).addTo(this.$refs.map.mapObject);
        // }

        // 加载测距、面积测距、打印控件
        this.control.lineMeasure = L.control
          .lineMeasure({ drawBtn: document.getElementById('lineMeasure') })
          .addTo(this.$refs.map.mapObject)
        this.control.areaMeasure = L.control
          .areaMeasure({ drawBtn: document.getElementById('areaMeasure') })
          .addTo(this.$refs.map.mapObject)
        this.control.browserPrint = L.control
          .browserPrint({ el: document.getElementById('browserPrint') })
          .addTo(this.$refs.map.mapObject)

        this.$refs.map.mapObject.on('zoomend', function(e) {
          console.log(e, 'event')
        })
      })
    },
    fitBounds() {
      let _geoJsonArr = []
      this.$refs.geoJson.forEach((item, index) => {
        _geoJsonArr.push(item.getBounds())
      })
      this.geoJsonArr = _geoJsonArr
      this.$refs.map.fitBounds(this.geoJsonArr, {
        padding: [100, 100],
        maxZoom: 5
      }) // 定位到图形位置
    },
    changeMapMode(mode) {
      // 切换地图模式
      this.mapMode = mode
    },
    handleClickPolygon(e, item) {
      if (item.projectType != '农村建设用地复垦') {
        return
      }
      getPkDetailById({
        flowId: item.flowId,
        landId: item.landId
      }).then(res => {
        this.pkDetail = res.data
        this.$nextTick(() => {
          this.$refs.features.mapObject.openPopup([e.latlng.lat, e.latlng.lng])
        })
      })
    },
    handleClickPolygon2(item) {
      this.$nextTick(() => {
        this.$refs.features.mapObject.openPopup([
          item.point.coordinates[1],
          item.point.coordinates[0]
        ])
        this.$refs.map.mapObject.setView(
          [item.point.coordinates[1], item.point.coordinates[0]],
          17
        )
      })
    },
    changePkPosition(index) {
      // 点击
      this.restorePolygonStyle()
      this.currentPolygon = this.$refs.geoJson[index]
      this.currentPolygon.setOptionsStyle(this.polygonStyleMap.activeStyle)
      this.$refs.map.fitBounds(this.currentPolygon.getBounds())
    },
    restorePolygonStyle() {
      // 重置地图片块样式
      this.$refs.geoJson.forEach((item, index) => {
        item.setOptionsStyle(this.polygonStyleMap.defaultStyle)
      })
    },
    handleImageDialog(url) {
      this.dialogImageUrl = url
      this.dialogVisible = true
    },
    handleTreeCheck(item, index) {
      if (item.disabled) {
        this.$message({
          message: `暂无图层`,
          type: 'warning'
        })
        return
      }
      if (item.url) {
        item.isChecked = !item.isChecked
        if (item.isChecked == true) {
          this.treeCheckedObj[item.id] = item.url
          this.toumingList.push(item)
        } else {
          this.toumingList.splice(index, 1)
          delete this.treeCheckedObj[item.id]
        }
      }
      this.$forceUpdate()
    },
    setOpacity(e, index) {
      this.$nextTick(() => {
        this.$refs.treeCheckedLayer[index].mapObject.setOpacity(e)
      })
    },
    handlePkSearch(queryString, callback) {
      var restaurants = this.pkList
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants
      callback(results)
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        )
      }
    },

    handleMapSearchSelect(item) {
      this.currentPkData = item
      this.changePkPosition(item.index)
    },
    handleToolsSwitch(name) {
      this.toolsValue[name] = !this.toolsValue[name]
    },
    handleAutocompleteClear() {
      this.restorePolygonStyle()
      this.currentPkData = null
      this.$refs.map.fitBounds(this.geoJsonArr) // 定位到图形位置
    },
    handleScView(value) {
      if (value == 0) {
        this.$parent.shenchaYj(this.currentPkData)
        return
      }
      if (value == 1) {
        this.$parent.shenchaWy(this.currentPkData)
      }
    },
    getEchartsTopData() {
      this.echarts1Loader = true
      this.echarts2Loader = true
      echarts1()
        .then(res => {
          this.echarts1Loader = false
          this.echarts1Data = res.data
          this.$nextTick(() => {
            this.renderChart1()
          })
        })
        .catch(() => {
          this.echarts1Loader = false
        })
      echarts2()
        .then(res => {
          this.echarts2Loader = false
          this.echarts2Data = res.data
          this.$nextTick(() => {
            this.renderChart2()
          })
        })
        .catch(() => {
          this.echarts2Loader = false
        })
    },
    totalAndArea() {
      // 一期统计和面积统计
      // 获取总体统计及各阶段统计数据
      this.echarts3Loader = true
      totalAndArea()
        .then(res => {
          this.echarts3Loader = false
          this.echarts3Data = res.data
          this.$nextTick(() => {
            this.renderChart3()
          })
        })
        .catch(() => {
          this.echarts3Loader = false
        })
    },
    renderEcharts4() {
      this.echarts4Loader = true
      echarts4()
        .then(res => {
          this.echarts4Loader = false
          this.echarts4Data = res.data
          this.$nextTick(() => {
            this.renderChart4()
          })
        })
        .catch(() => {
          this.echarts4Loader = false
        })
    },
    renderTotalAndArea2() {
      this.echarts5Loader = true
      totalAndArea2()
        .then(res => {
          this.echarts5Loader = false
          this.echarts5Data = res.data
        })
        .catch(() => {
          this.echarts5Loader = false
        })
    },
    getPoint() {
      this.$nextTick(() => {
        // 设置zoomControl位置
        console.log(this.$refs.map.mapObject)
        this.$refs.map.mapObject.zoomControl.setPosition('bottomleft')
      })
      projectReadLineStatistics({
        projectType: this.projectType
      })
        .then(res => {
          this.locations = res.data
          this.initMap()
        })
        .catch(() => {})
    },
    tabGetPoint(projectType) {
      if (this.projectType == projectType) {
        // this.$nextTick(() => {
        //   this.fitBounds();
        // });
      } else {
        this.projectType = projectType
        projectReadLineStatistics({
          projectType: this.projectType
        })
          .then(res => {
            this.locations = res.data
            // this.$nextTick(() => {
            //   this.fitBounds();
            // });
          })
          .catch(err => {})
      }
    },
    viewProjectInfo() {
      this.$nextTick(() => {
        this.$refs.rightPanel.viewProjectInfo(this.pkDetail)
      })
    }
  },
  created() {
    this.getEchartsTopData() // 获取第一行echarts的数据
    this.totalAndArea() // 一期统计和面积统计
    this.renderTotalAndArea2() // 二期统计和面积统计
    this.renderEcharts4()
    this.getPoint()
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
@import '~leaflet/dist/leaflet.css';
@import '~leaflet.markercluster/dist/MarkerCluster.css';
@import '~leaflet.markercluster/dist/MarkerCluster.Default.css';

.cityChart {
  position: absolute;
  right: 455px;
  top: 10px;
  z-index: 1001;
  background-color: #fff;

  // &.active {
  //   right: 410px;
  //   top: 15px;
  // }
}

.map-container {
  position: relative;
  display: flex;
  justify-content: center;
  height: calc(100vh - 114px);
  // height: 100%;
  // margin-top: 30px;
}
.map-left {
  width: 0;
  border: 1px solid #e9e9e9;
  border-right: none;

  // &.active {
  //   width: 230px;
  // }
}
.map-nav {
  background: #f2f2f2;
  height: 40px;
  border-bottom: 1px solid #e9e9e9;
  overflow: hidden;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #4d4d4d;
  line-height: 40px;
}
.map-content {
  width: 100%;
}
.map-mode {
  display: flex;
  flex-direction: row;
  width: auto;
  height: 62px;
  overflow: hidden;
  font-size: 0;
  position: absolute;
  z-index: 500;
  right: 0;
  bottom: 30px;

  &-item {
    position: relative;
    width: 75px;
    height: 75px;
    display: block;
    overflow: hidden;
    border: 1px solid #308be7;
    cursor: pointer;

    .text {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 20px;
      color: rgba(255, 255, 255, 1);
      width: 42px;
      height: 20px;
      display: block;
      overflow: hidden;
      color: #fff;
      text-align: center;
      line-height: 17px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      background: linear-gradient(
        138deg,
        rgba(92, 205, 255, 1) 0%,
        rgba(49, 144, 214, 1) 100%
      );
      border-radius: 16px 0px 90px 0px;
    }
  }

  &-item.yx {
    background: url('../../assets/map/yx-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
  }

  &-item.sl {
    background: url('../../assets/map/dt-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
  }

  &-item.dx {
    background: url('../../assets/map/dx-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
  }
}

.nav-switch {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: #fff;
  width: 20px;
  height: 30px;
  border: 1px solid #ccc;
  border-left: 0 none;
  display: block;
  overflow: hidden;
  font-size: 18px;
  text-align: center;
  line-height: 30px;
  position: absolute;
  z-index: 1001;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}

.popup-tab {
  position: relative;

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 330px;
    overflow-y: auto;
  }

  li {
    font-size: 14px;
    color: #444;
    min-height: 30px;
    padding: 10px 10px;
  }

  .no-data {
    width: 100%;
    overflow: hidden;
    color: #444;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    padding: 0 10px;
    text-align: center;
    margin: 35px 0;
    clear: both;
  }
}

.popup-jg-tab {
  height: 330px;
  overflow-y: auto;

  .one-item {
    height: 30px;
    overflow: hidden;
    font-size: 13px;
    color: #999;
    line-height: 30px;
  }

  .one-item.check /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
    font-size: 14px;
    color: #12203e;
  }

  .table-box {
    margin-top: 10px;
  }
}
.one-item.check {
  margin-bottom: 10px;
}
.popup-jg-tab /deep/ .el-card__body {
  padding: 0;
}

.map-tools {
  width: auto;
  height: 40px;
  border-radius: 4px;
  box-shadow: 1px 1px 2px #666;
  // overflow: hidden;
  font-size: 0;
  position: absolute;
  z-index: 500;
  left: 30px;
  top: 30px;
  cursor: pointer;

  &-item {
    position: relative;
    float: left;
    background: #fff;
    // width: 40px;
    padding: 0 12px;
    // border-bottom: 1px solid #efefef;
    // overflow: hidden;
    line-height: 40px;
    font-size: 0;
    color: #666;
    text-align: center;
    // border-right: 1px solid #e6e6e6;

    &.line:after {
      position: absolute;
      display: block;
      content: '';
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      width: 1px;
      height: 18px;
      background: rgba(230, 230, 230, 1);
    }

    i {
      color: #666;
      display: block;
    }

    .svg-icon {
      display: block;
      font-size: 24px;
      height: 40px;
      color: #666;
    }

    &.active {
      i {
        color: #409eff;
      }
    }

    &:hover {
      background: #efefef;
    }
  }
}

.map-search {
  position: absolute;
  z-index: 500;
  left: 30px;
  top: 30px;
  font-size: 0;
  display: flex;
  flex-direction: row;

  .line:after {
    position: absolute;
    display: block;
    content: '';
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 1px;
    height: 18px;
    background: rgba(230, 230, 230, 1);
  }

  /deep/ .el-button-group {
    position: relative;
    margin-left: 10px;
    border-radius: 4px;
    box-shadow: 1px 1px 2px #666;
  }

  /deep/ .el-button {
    border: 1px solid #fff;
  }

  /deep/ .el-input__inner {
    width: 344px;
    border-radius: 4px;
    box-shadow: 1px 1px 2px #666;
  }

  /deep/ .el-input__inner {
    height: 36px;
    border: none;
  }

  /deep/ .el-input__icon {
    font-size: 18px;
    line-height: 36px;
    color: #999;
  }

  ::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #b3b3b3;
    font-size: 14px;
  }

  ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #b3b3b3;
    font-size: 14px;
  }

  :-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #b3b3b3;
    font-size: 14px;
  }
}

.map-layer {
  width: 384px;
  position: absolute;
  z-index: 1001;
  // right: 30px;
  left: 30px;
  top: 86px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 1px 1px 2px #666;
  .type-change {
    width: 100%;
    display: flex;
    div {
      height: 48px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      flex: 1;
      cursor: pointer;
      color: rgba(128, 128, 128, 1);
      line-height: 48px;
      text-align: center;
      background: rgba(245, 245, 245, 1);
    }
    .on {
      background: rgba(64, 158, 255, 1);
      color: #fff;
    }
  }
  .touming {
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
    opacity: 0.8;
    .touming-item {
      .touming-title {
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 20px;
        color: rgba(102, 102, 102, 1);
        .close {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          border: 1px solid #999999;
          float: right;
          line-height: 13px;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }

  /deep/ .el-collapse-item__header {
    // background-color: #f5f5f5;
    height: 40px;
    line-height: 40px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
  }

  /deep/ .el-collapse-item__wrap {
    background-color: rgba(255, 255, 255, 0.8);
  }

  /deep/ .el-collapse-item__arrow {
    margin: 0 18px 0 auto;
  }

  &-title {
    position: relative;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(77, 77, 77, 1);
    margin-left: 28px;

    &::before {
      content: '';
      position: absolute;
      display: block;
      width: 3px;
      height: 16px;
      background: rgba(21, 112, 213, 1);
      top: 50%;
      left: -8px;
      transform: translateY(-50%);
    }
  }

  /deep/ .el-collapse-item__content {
    padding-bottom: 0;
  }

  &-content {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;

    &-item {
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
      margin-right: 24px;
      transition: all 0.3s;
      cursor: pointer;

      &:hover {
        color: #409eff;
      }

      &.active {
        color: #409eff;
      }
    }
  }
}

.leaflet-control-browser-print {
  display: none;
}

.side-by-side-popup {
  text-align: center;

  .confirm-btn {
    margin-top: 26px;
  }

  /deep/
    .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    // background-color: #f9b5a3;
    background-color: rgb(160, 207, 255);
  }
}

.piankuaiBox_select {
  display: flex;
  margin-top: 20px;
  margin-left: 20px;
  .piankuaiBox_select_item {
    width: 88px;
    height: 36px;
    background: #fff;
    opacity: 1;
    border-radius: 4px;
    color: #999999;
    text-align: center;
    line-height: 36px;
    font-size: 14px;
    margin-right: 8px;
    cursor: pointer;
  }
  .piankuaiBox_select_item.active {
    background: rgba(238, 243, 248, 1);
    color: #1d88f3;
  }
}

.piankuaihao {
  font-size: 20px;
  line-height: 28px;
  padding: 10px 0 21px 0;
  color: #333333;
  margin-left: 21px;
  border-bottom: 1px solid #f2f2f2;
}

.jibenxinxi {
  padding-bottom: 60px;
  height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  ul {
    list-style: none;
    overflow: hidden;
    padding-left: 10px;
    margin-top: 30px;
    li {
      float: left;
      color: #b3b3b3;
      font-size: 13px;
      margin-right: 40px;
      margin-bottom: 16px;
      span {
        color: #666666;
      }
      .redText {
        color: red;
      }
    }
  }
}

.zonghexinxiFirst {
  display: flex;
  margin-top: 30px;
  .zonghexinxiLeft {
    width: 88px;
    font-size: 14px;
    color: #333333;
  }
}

.zonghexinxiItem {
  margin-left: 20px;
}

.item-box-box {
  display: flex;
  .item-box-box-left {
    width: 82px;
    font-size: 13px;
    color: #b3b3b3;
  }
}

.one-item-item {
  margin-bottom: 21px;
}

.item-box-firstItem {
  font-size: 13px;
  color: #b3b3b3;
}

.table-box {
  overflow: hidden;
  .table-box-item {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}

.table-box-left {
  font-size: 13px;
  color: #b3b3b3;
}

.jibenxinxi .ziliaoList {
  overflow: hidden;
  margin-top: 0;
  padding-left: 0;
  li {
    float: left;
    font-size: 13px;
    color: #1d88f3;
    margin-left: 18px;
    margin-right: 0;
    cursor: pointer;
  }
}

.yijianBox-item {
  margin-bottom: 20px;
  font-size: 14px;
  color: #666666;
  display: flex;
  .yijianBox-item-left {
    margin-right: 30px;
  }
}

.jibenxinxiyijian {
  margin-top: 33px;
  margin-left: 10px;
}

.submityijian {
  margin-top: 60px;
}

.iframeLoad {
  display: flex;
  font-size: 35px;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.map-iframe {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 501;
  width: 50%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 40px;
  background-color: #fff;
  .shenchaButton {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}

.shenchaBox {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.shenchaBox_item_input {
  width: 300px;
}

.shenchaBox_item_button {
  width: 300px;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 50px;
}

.shenchaBoxDialog /deep/ .el-dialog {
  width: 500px;
}

.buttonGroupClass {
  display: flex;
}

.map-right {
  width: 100%;
  // height: 900px;
  // height: 829px;
  // padding: 0 0 22px 0;
  // background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 4px;
  position: relative;
  // border: 1px solid rgba(213, 213, 213, 1);
}

.show-left-chart {
  position: absolute;
  left: -16px;
  top: 40%;
  transform: translateY(-50%);
  width: 16px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  border-radius: 4px 0 0 4px;
  background-color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

.map-right-nav {
  background: rgba(255, 255, 255, 1);
  height: 40px;
  font-size: 12px;
  // font-family:Microsoft YaHei;
  font-weight: 400;
  line-height: 40px;
  color: rgba(128, 128, 128, 1);
  padding: 0 0 0 20px;
  box-sizing: border-box;
  opacity: 1;
  border-bottom: 1px solid rgba(213, 213, 213, 1);
}

.map-right-nav ul {
  height: 100%;
  padding: 0;
  margin: 0;
}

.map-right-nav ul li {
  float: left;
  margin-right: 20px;
  list-style: none;
  height: 102%;
  cursor: pointer;
}

.map-right-nav ul li.on {
  color: #409eff;
  border-bottom: 2px solid #409eff;
  font-size: 14px;
  // font-family:Microsoft YaHei;
  font-weight: 600;
}

.map-right-panle {
  background: rgba(255, 255, 255, 1);
  width: 100%;
  padding: 10px 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.map-right-panle .item {
  // width: 130px;
  min-width: 30%;
  height: 62px;
  background: linear-gradient(
    134deg,
    rgba(102, 213, 254, 1) 0%,
    rgba(61, 122, 227, 1) 100%
  );
  opacity: 1;
  border-radius: 4px;
  margin-bottom: 6px;
  box-sizing: border-box;
  padding: 8px;
}

.map-right-panle .item:nth-child(2) {
  background: linear-gradient(
    134deg,
    rgba(113, 251, 224, 1) 0%,
    rgba(58, 219, 226, 1) 100%
  );
}

.map-right-panle .item:nth-child(3) {
  background: linear-gradient(
    134deg,
    rgba(106, 250, 150, 1) 0%,
    rgba(43, 224, 78, 1) 100%
  );
}

.map-right-panle .item:nth-child(4) {
  background: linear-gradient(
    134deg,
    rgba(251, 182, 113, 1) 0%,
    rgba(230, 140, 62, 1) 100%
  );
}

.map-right-panle .item:nth-child(5) {
  background: linear-gradient(
    134deg,
    rgba(236, 112, 250, 1) 0%,
    rgba(178, 62, 230, 1) 100%
  );
}

.map-right-panle .item:nth-child(6) {
  background: linear-gradient(
    134deg,
    rgba(115, 252, 169, 1) 0%,
    rgba(34, 213, 105, 1) 100%
  );
}

.map-right-panle .item .title {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 16px;
  color: rgba(245, 245, 245, 1);
  opacity: 1;
  padding: 0;
  margin: 0;
}

.map-right-panle .item .number {
  font-size: 22px;
  font-family: Roboto;
  font-weight: 400;
  color: rgba(250, 250, 250, 1);
  padding: 0;
  margin: 0;
  margin-top: 8px;
}

.map-right .wrap {
  box-sizing: border-box;
  padding: 0 20px;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
}

.map-right .wrap p.wrap-title {
  margin: 0;
  padding: 0;
  position: relative;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(77, 77, 77, 1);
  padding-left: 10px;
}

.map-right .wrap p.wrap-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 14px;
  width: 3px;
  background: rgba(21, 112, 213, 1);
  display: inline-block;
}

.map-right .wrap .pie {
  width: 100%;
  min-height: 100px;
  display: flex;
  margin: 12px 0;
  justify-content: space-around;
  position: relative;
}

.map-right .wrap .pie .pie-left,
.map-right .wrap .pie .pie-right {
  position: relative;
}

.left-cover,
.right-cover {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  left: 18px;
  top: 18px;
  position: absolute;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.map-right .wrap .pie .rate {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(91, 169, 245, 1);
  display: block;
  margin-top: 10px;
}

.map-right .tip {
  font-size: 12px;
  font-family: Microsoft YaHei;
  color: rgba(128, 128, 128, 1);
}

.pie-line {
  width: 0px;
  height: 70px;
  border: 1px dashed rgba(213, 213, 213, 1);
  opacity: 1;
  position: absolute;
  left: 49%;
  top: 25px;
}

.pie-title {
  font-size: 12px;
  // padding-left: 38px;
  margin-top: 12px;
  color: rgba(102, 102, 102, 1);
  text-align: center;
}

.wrap .btn {
  padding: 8px 10px;
  background: rgba(245, 245, 245, 1);
  font-size: 14px;
  font-family: Microsoft YaHei;
  color: rgba(153, 153, 153, 1);
  display: inline-block;
  margin-right: 10px;
  border-radius: 4px;
  cursor: pointer;
}

.wrap .btn.active {
  background: rgba(73, 160, 244, 1);
  color: rgba(255, 255, 255, 1);
}

.wrap .status {
  margin: 20px 0;
}

.wrap .status div {
  display: inline-block;
  margin-right: 24px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}

.wrap .status div span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.wrap .status .green {
  background-color: #17ac17;
  border: 3px solid #37cb37;
}

.wrap .status .blue {
  background-color: #358de6;
  border: 3px solid #74b8ff;
}

.wrap .status .pink {
  background-color: #e33c3c;
  border: 3px solid #ff6a6a;
}

.dw {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(166, 166, 166, 1);
}

.choose-item {
  position: absolute;
  left: 62px;
  bottom: 12px;
  width: 260px;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 4px;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  z-index: 501;
}

.right-all {
  position: absolute;
  right: 20px;
  top: 10px;
  width: 420px;
  z-index: 1001;

  // &.active {
  //   width: 500px;
  //   top: 20px;
  //   // zoom: 0.75;
  // }
  .map-right-panle {
    .item {
      width: initial;
    }
  }
}

.search-area {
  position: absolute;
  top: 77px;
  left: 30px;
  height: 932px;
  width: 384px;
  line-height: 40px;
  z-index: 1001;
}

.detail {
  // &.active {
  //   top: 15px;
  //   right: 420px;
  // }
  width: 320px;
  // height: 830px;
  background: rgba(255, 255, 255, 1);
  // opacity: 0.92;
  border-radius: 4px;
  position: absolute;
  z-index: 1001;
  top: 10px;
  right: 460px;

  // opacity: 0.92;
  padding-bottom: 30px;
  .close {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #999999;
    float: right;
    line-height: 13px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    top: 21px;
    right: 20px;
  }
  .title {
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(77, 77, 77, 1);
    opacity: 1;
    padding: 20px 55px 20px 20px;
    border-bottom: 1px dashed rgba(213, 213, 213, 1);
  }
  .btn {
    opacity: 1;
    border-radius: 2px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 36px;
    color: rgba(29, 136, 243, 1);
    padding: 14px 20px 10px 20px;
    div {
      width: 88px;
      height: 36px;
      text-align: center;
      cursor: pointer;
    }
    .on {
      background: rgba(206, 230, 255, 1);
    }
    .left {
      display: inline-block;
    }
    .right {
      display: inline-block;
    }
  }

  .li-list {
    padding: 3px 20px 20px 20px;

    ul {
      padding: 0;
      margin: 0;
      li {
        font-size: 13px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 30px;
        opacity: 1;
        list-style: none;
        overflow: hidden;

        .left {
          color: #b3b3b3;
        }

        div {
          float: left;
          word-break: break-all;
          color: #666666;
        }
      }
    }
  }

  .piankuai {
    // padding: 0 20px;
    ul {
      padding: 0;
      margin: 0;
      height: 450px;
      overflow-y: scroll;
    }
    li {
      display: flex;
      text-align: center;
      cursor: pointer;
      &:hover {
        background-color: #f0f3f5;
      }
      .no {
        line-height: 84px;
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        flex: 1;
      }
      .right {
        flex: 3;
        text-align: left;
        .name {
          font-size: 14px;
          font-weight: 400;
          color: rgba(77, 77, 77, 1);
        }
        .code {
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 10px;
          color: rgba(102, 102, 102, 1);
        }
        .user {
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 10px;
          color: rgba(102, 102, 102, 1);
        }
      }
    }
  }
}
.item-detail {
  background: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-radius: 4px;
  .item-title {
    padding-bottom: 12px;
    border-bottom: 1px dashed #d5d5d5;
    font-size: 20px;
    // font-weight: bold;
    line-height: 1.5;
    color: rgba(77, 77, 77, 1);
  }
  .item-info {
    display: flex;
    flex-direction: row;
    padding: 10px 0;
    border-bottom: 1px dashed #d5d5d5;
    p {
      margin: 0;
      padding: 0;
      font-size: 16px;
      line-height: 1.5;
    }
    .item-name {
      color: rgba(77, 77, 77, 1);
    }
    .item-desc {
      color: rgba(153, 153, 153, 1);
    }
  }
  .view-detail {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 30px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(57, 156, 251, 1);
    cursor: pointer;
  }
}

.search-content /deep/ .el-input__inner {
  height: 28px !important;
  line-height: 28px !important;
  background: rgba(248, 248, 248, 1) !important;
  font-size: 12px !important;
  padding-right: 0px;
}
</style>
